<script setup lang="ts">
import { getColaZb_c, getColaZbDy_c } from '@/api/lidare'
import { ref, onMounted, computed } from 'vue'
import type { colaZbType, colaZbDyType } from '@/type/typings'
import { useRouter } from 'vue-router';
const router = useRouter()

// 调研数据
const colaBanner = ref<Array<colaZbDyType>>([])

// 直播列表数据
const colaZbData = ref<Array<colaZbType>>([])

onMounted(async () => {

    let { data } = await getColaZb_c()
    console.log(data._data.list, 'nnn');
    colaZbData.value = data._data.list

    let { data: data2 } = await getColaZbDy_c()
    console.log(data2._data.adList, 'vvv');
    colaBanner.value = data2._data.adList

})

// 去到直播详情页
const goToColaZbDetail = (liveId: string, anchorName: string, recordedUrl: string) => {
    console.log('zouni');
    
    router.push(`/zbDetail/${liveId}?name=${anchorName}&videoUrl=${recordedUrl}`)

}


</script>

<template>
    <div class="cola-zb fixed-zbest">
        <div class="cola-zb-head">
            <van-icon name="arrow-left" size="20" @click.stop="$router.back()" class="back-icon" />
            <span class="cola-title">可乐直播</span>
        </div>
        <div class="cola-zb-box">
            <div class="cola-zb-banner">
                <img :src="colaBanner[0]?.content" alt="">
            </div>

            <div class="cola-zb-list">
                <div class="cola-zb-item" v-for="c in colaZbData" :key="c.liveId" @click="goToColaZbDetail(c.liveId,c.anchorName,c.recordedUrl)">
                    <img :src="c.cover" alt="" class="zb-img">
                    <div class="zb-title">{{ c.title }}</div>
                    <div class="zb-info">
                        <img src="https://s1.huishoubao.com/colagoods/app/img/icon-avatar.7af1885e.svg" alt=""
                            class="zb-info-img">
                        <span class="zb-info-name">{{ c.anchorName }}</span>
                    </div>
                    <div class="time-num">
                        <div class="yugao" v-if="c.type == '1'">
                            <span class="yg-block">预告</span>
                            <span class="yugao-time">{{ c.liveTime.slice(5,16) }} 开播</span>
                        </div>
                        <div class="yugao" v-else>
                            <span class="hf-block">回放</span>
                            <span class="yugao-time">{{ c.liveTime.slice(5,10) }} {{c.newWatchNum}}人观看</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.cola-zb {
    width: 100%;
    padding-bottom: .5rem;
    overflow: scroll;
    padding-top: .5rem;

    .cola-zb-head {
        width: 100%;
        height: .5rem;
        display: flex;
        align-items: center;
        background-image: url(@/assets/images/plant/1678187437277.png);
        background-size: cover;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 30;

        .back-icon {
            margin-left: .12rem;
            color: #fff;
        }

        .cola-title {
            display: inline;
            font-size: .2rem;
            font-weight: 600;
            color: #fff;
            margin-left: 1.25rem;
        }

    }

    .cola-zb-box {
        padding: 0 .1rem;
        background-color: #f4f5f8;
        padding-bottom: .4rem;
    }

    .cola-zb-banner {
        height: 120px;
        margin-top: 20px;

        >img {
            width: 350px;
            border-radius: 10px;
        }
    }

    .cola-zb-list {
        margin-top: .15rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .cola-zb-item {
            width: 1.72rem;
            height: 2.55rem;
            margin-bottom: .15rem;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            position: relative;

            .time-num {
                position: absolute;
                height: .16rem;
                line-height: .16rem;
                top: .12rem;
                left: .1rem;
                background-color: rgba($color: #000000, $alpha: .4);
            }

            .zb-img {
                width: 1.72rem;
                height: 1.72rem;
            }

            .zb-title {
                margin-top: .1rem;
                font-size: .13rem;
                height: .3rem;
                color: #222;
                padding: 0 .05rem;
            }

            .zb-info {
                display: flex;
                margin-top: .1rem;
                align-items: center;
                padding: 0 .05rem;

            }

            .zb-info-img {
                width: .23rem;
                height: .23rem;
            }

            .zb-info-name {
                font-size: .12rem;
                margin-left: .04rem;
            }

        }
    }

    .yg-block {
        display: inline-block;
        padding: 0 .01rem;
        font-size: .13rem;
        background-color:#8a73f6;
        color: #fff;
    }

    .hf-block {
        display: inline-block;
        padding: 0 .01rem;
        font-size: .14rem;
        background-color:#fff;
        color: #222;
    }

    .yugao-time {
        font-size: .12rem;
        color: #fff;
        padding: 0 .02rem;
    }






}
</style>